<template>
  <div>
    <!-- 头部 -->
    <div class="table_header flex flex_bet flex-wrap" style="padding: 20px 20px 0 20px">
      <div class="table_button">
        <el-button type="primary" icon="el-icon-refresh" size="mini" @click="Refresh"></el-button>
        <el-button type="primary" icon="el-icon-plus" size="mini" @click="addButton">添加</el-button>
        <el-button type="primary" v-if="false" icon="el-icon-delete-solid" size="mini" @click.stop="getdeleteApp()">删除</el-button>
      </div>
      <div class="table_searchs flex felx_align">
        <div class="table_search flex">
          <el-input placeholder="搜索" v-model="searchTable" class="input-with-select" size="small">
            <el-select v-model="select" slot="prepend" placeholder="请选择" class="table_select" style="width:105px">
              <el-option label="栏目名" value="4"></el-option>
              <el-option label="应用名称" value="2"></el-option>
            </el-select>
            <el-button slot="append" icon="el-icon-search" @click="idnameSearch"></el-button>
          </el-input>
        </div>
        <dynamicTable :checkboxVal="checkboxVal" @alter="alterCheckbok" />
      </div>
    </div>
    <div class="center"  style="padding-top: 0">
      <!-- 应用上传管理table -->
        <el-table stripe :data="uploadingTable" style="width: 100%" :key="key" border ref="tableDataRef" max-height="694" @sort-change="tableSortCge">
          <el-table-column v-if="colData[0].istrue" prop="app_id" label="id" min-width="100" align="center" show-overflow-tooltip fixed></el-table-column>
          <el-table-column v-if="colData[1].istrue" prop="column_name" label="栏目名称" min-width="100" align="center" show-overflow-tooltip fixed sortable="custom"></el-table-column>

          <el-table-column  v-if="isAdmin && colData[2].istrue" prop="app_name" label="应用名称" min-width="100" align="center" show-overflow-tooltip fixed sortable="custom"></el-table-column>
          <el-table-column v-if="colData[3].istrue && isAdmin"  prop="app_img" label="应用图标" min-width="100" align="center" fixed>
            <template slot-scope="scope">
              <div class="icon_img flex flex_cen">
                <img :src="scope.row.app_img" alt />
              </div>
            </template>
          </el-table-column>
          <el-table-column v-if="colData[4].istrue && isAdmin"  prop="app_package" label="应用包名" min-width="120" align="center" fixed>
            <template slot-scope="scope">{{scope.row.app_package}}</template>
          </el-table-column>
          <el-table-column v-if="colData[5].istrue && isAdmin"  prop="app_size" label="应用大小" min-width="100" align="center" sortable>
            <template slot-scope="scope">{{scope.row.app_size| zhDate}}</template>
          </el-table-column>
            <el-table-column v-if="colData[6].istrue && isAdmin"  prop="app_url" label="下载地址" min-width="80" align="center">
              <template slot-scope="scope">
                <div class="flex flex_cen">
                  <i class="iconfont iconanzhuo download" style="border:none;background-color:inherit;color:#a4c872">
                    <a target="_blank" :href="scope.row.app_url"></a>
                  </i>
                </div>
              </template>
            </el-table-column>
          <el-table-column v-if="colData[7].istrue" prop="app_platter" label="收费套餐" min-width="100" align="center" >
          </el-table-column>
          <el-table-column v-if="colData[8].istrue" prop="app_desc" label="应用描述" min-width="150px" align="center" show-overflow-tooltip>
          </el-table-column>
          <el-table-column v-if="colData[9].istrue" prop="suitable_grade" label="适配年龄段" min-width="100" align="center" sortable="custom">
            <template slot-scope="scope">
             <span>{{scope.row.gradeStr}}</span>
            </template>
          </el-table-column>
          <el-table-column v-if="colData[10].istrue && isAdmin" prop="admin_name" label="上传人" min-width="100" align="center" >
          </el-table-column>
          <el-table-column v-if="colData[11].istrue" prop="create_time" label="上传时间" min-width="160" align="center" >
            <template slot-scope="scope">{{scope.row.create_time| newDate}}</template>
          </el-table-column>
          <!-- table编辑与操作 -->
          <el-table-column label="操作" v-if="isAdmin" min-width="150" align="center">
            <template slot-scope="scope">
              <el-button type="primary" size="mini" @click.stop="openEdit(scope.row)">编辑</el-button>
              <el-button size="mini" @click.stop="getdeleteApp(scope.row.app_id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      <!-- 分页 -->
      <div class="paging">
        <el-pagination :current-page.sync="listQuery.startSize" :page-sizes="[12, 60, 120, 240]" :page-size="listQuery.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total" background
                       @size-change="handleSizeChange" @current-change="handleCurrentChange"></el-pagination>
      </div>
      <!-- 隐藏部分 -->
      <!-- 添加 -->
      <el-dialog title="应用信息" :visible.sync="addFormVisible" width="60%" @close="addFormclose" :close-on-click-modal="false" :close-on-press-escape="false" :before-close="handleClose" >
        <el-form :model="addForm" ref="ruleForm" :rules="rules" class="diolog_adapt">
          <el-form-item label="上传方式:" label-width="120px">
            <el-radio-group v-model="addForm.add_type" @change="clearAddForm">
              <el-radio :label="1">选择已上传apk</el-radio>
              <el-radio :label="2">上传新apk</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="apk选择" label-width="120px" v-show="addForm.add_type==1">
            <el-select v-model="addForm.chooseApk" placeholder="请选择" @change="setAddForm" style="width: 200px">
              <el-option
                v-for="item in uploadApkOptions"
                :key="item.app_id"
                :label="item.app_name"
                :value="item.app_id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="应用上传:" label-width="120px" v-show="addForm.add_type==2">
            <div class="flex felx_align">
              <el-upload class="upload-demo" action="#" id="file" :auto-upload="false" :show-file-list="false" :on-change="apkFile">
                <el-button size="small" type="primary"><span v-if="!apkSize">apk上传</span><span v-else>apk上传( 文件{{apkSize | zhDate}} )</span></el-button>
                <el-progress :percentage="goodsData" v-if="!videoFlag" style="margin-top:10px"></el-progress>
              </el-upload>
              <span v-show="apkUnplate" style="color: red;margin-left:10px">只允许修改相同包名的应用，需修改其他应用请重新添加</span>
            </div>
          </el-form-item>
          <el-form-item label="栏目名称" label-width="120px" prop="column_name">
            <el-input v-model="addForm.column_name" autocomplete="off" class="add_select" placeholder="请输入栏目名称" style="width: 200px"></el-input>
          </el-form-item>
          <div class="flex">
            <el-form-item label="应用名称" label-width="120px" class="addform_headers" prop="app_name">
              <el-input v-model="addForm.app_name" autocomplete="off" class="add_select" placeholder="自动生成，请勿手动修改"></el-input>
            </el-form-item>
            <el-form-item label="应用包名" label-width="120px" class="addform_headers" prop="app_package">
              <el-input v-model="addForm.app_package" autocomplete="off" class="add_select" placeholder="自动生成，请勿手动修改"></el-input>
            </el-form-item>
          </div>
          <el-form-item label="应用图标" label-width="120px" class="addform_headers">
            <el-upload class="avatar-uploader" action="#" :auto-upload="false" :show-file-list="false" :on-change="iconAvatarSuccess">
              <div v-if="addForm.app_img" style="height:148px;width:148px">
                <img :src="addForm.app_img" class="avatar" style="height:100%;width:100%" />
              </div>
              <i v-else class="el-icon-plus avatar-uploader-icon" style="height:148px;width:148px;line-height: 148px;background-color: #fbfdff;"></i>
            </el-upload>
            <div style="line-height:0;color:red">*若系统自动生成不正确请手动上传</div>
          </el-form-item>

          <el-form-item label="跳转方式:" label-width="120px">
            <el-radio-group v-model="addForm.jump_type">
              <el-radio :label="1">显式跳转</el-radio>
              <el-radio :label="2">隐式跳转</el-radio>
            </el-radio-group>
          </el-form-item>
          <div class="flex">
            <el-form-item label="scheme" label-width="120px" class="addform_headers" prop="scheme" v-show="addForm.jump_type==2">
              <el-input v-model="addForm.scheme" autocomplete="off" class="add_select" placeholder="跳转scheme"></el-input>
            </el-form-item>
            <el-form-item label="action" label-width="120px" class="addform_headers" prop="action" v-show="addForm.jump_type==2">
              <el-input v-model="addForm.action" autocomplete="off" class="add_select" placeholder="跳转action"></el-input>
            </el-form-item>
            <el-form-item label="activity" label-width="120px" class="addform_headers" prop="activity" v-show="addForm.jump_type==1">
              <el-input v-model="addForm.activity" autocomplete="off"  placeholder="请输入activity名称"></el-input>
            </el-form-item>
          </div>
          <div v-for="(item,index) in addForm.paramsList" :key="index" class="flex">
            <el-form-item label="参数" label-width="120px" class="addform_headers" v-show="addForm.jump_type==1">
              <el-input placeholder="请输入参数值" v-model="item.value" class="input-with-select">
                <el-select v-model="item.param" slot="prepend" placeholder="请选择" allow-create filterable default-first-option >
                  <el-option
                    v-for="item in paramOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-input>
            </el-form-item>
            <el-form-item label-width="20px" v-show="addForm.jump_type==1">
              <el-button icon="el-icon-plus" type="primary"  @click="toAddParams"></el-button>
              <el-button icon="el-icon-minus" type="danger" @click="toDelParams(item, index)"></el-button>
            </el-form-item>
          </div>

          <el-form-item label="适配学龄" label-width="120px" prop="suitable_grade" >
            <el-select v-model="addForm.suitable_grade" multiple placeholder="请选择适配学龄段" class="add_select">
              <el-option
                v-for="item in gradeOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value.toString()">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="套餐归属:" label-width="120px" prop="app_platter" v-if="false">
            <el-select v-model="addForm.app_platter" multiple placeholder="请选择" >
              <el-option
                v-for="item in platterOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="应用简介" label-width="120px" prop="app_desc">
            <el-input maxlength="150" show-word-limit autocomplete="off" placeholder="请输入应用简介,150字以内" type="textarea" v-model="addForm.app_desc" :rows="2"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="addFormVisibleclose" size="mini" round>取 消</el-button>
          <Debounce>
            <el-button v-if="apkUnplate" type="primary" @click.native="geteditApp('ruleForm')" size="mini" round>确 定</el-button>
            <el-button v-else type="primary" @click.native="addApk" size="mini" round>apk上传</el-button>
          </Debounce>
        </div>
      </el-dialog>
      <!-- 删除弹窗 -->
      <delete-Dialog title="" :visible.sync="deleteDialogs.show" width="25%" top="40vh" @deleteEvents="deleteEvents" :deleteText="deleteDialogs.deleteText" />
    </div>
  </div>
</template>

<script>
  import dynamicTable from "@/components/DynamicTable";
  import objectable from "@/utils/objectable.js";
  import { ossupload, ossImage } from '@/utils/ossUpload.js'
  import { uploadPreviewImg} from "@/api/application";
  import deleteDialog from "@/components/deleteDialog";
  import forbid from '@/directive/permission/forbid.js'
  import readMachine from 'app-info-parser'
  import jszip from 'jszip'
  import {addLauncherAppControl,queryLauncherAppAll,editLauncherAppControl,deleteLauncherApp} from "@/api/launcherMade"
  import { mapState } from 'vuex'
  import BMF from "browser-md5-file";
  export default {
    components: { dynamicTable, deleteDialog },
    data() {
      return {
        apkFiles: '',
        checkboxVal: ["ID", "栏目名称", "应用名称", "应用图标", "应用包名", "应用大小", "下载地址", "收费套餐", "应用描述", "适配年龄", "上传人", "上传时间"],
        key: 1,
        colData: [], //动态控制table
        uploadingTable: [],
        //添加表单
        addForm: {
          add_type: 1,
          chooseApk: "",
          app_name: "", app_package: "", app_version_name: "", app_version_code: "", column_name: "",
          app_img: "", //左侧多选select
          file: [],//应用图片
          app_desc: '',//应用简介
          bg: '',
          // app_platter: '', //套餐级别
          suitable_grade: '', //适配年龄
          scheme: '',   //跳转scheme
          action: '',   //跳转action
          app_md5: '',
          jump_type: 1,  //1.显式 2.隐式
          activity: '',
          paramsList: [{param:'', value:''}]
        },
        rules: {
          column_name: [
            { required: true, message: '请输入栏目名称', trigger: 'blur' },
          ],
          suitable_grade: [
            { required: true, message: '请选择适配学龄', trigger: 'change' }
          ],
          // app_platter: [
          //   { required: true, message: '请选择套餐归属', trigger: 'change' }
          // ],
        },
        value: "",
        //控制添加表单显示
        addFormVisible: false,
        fileList: [],
        dialogImageUrl: "",
        dialogVisible: false,
        disabled: false,
        images: "",
        //控制拖拽kpi上传
        apkVisible: false,
        total: 0, //总数量
        searchTable: "", //
        select: "2", //搜索条件
        arr: [],
        //上传后台获取的数据
        app: [],
        //编辑应用后台获取的数据
        complieApp: [],
        //apk上传按钮控制
        apkUnplate: true,
        //进度条
        videoUploadPercent: 0,
        videoFlag: true,
        listQuery: { startSize: 1, pageSize: 12, userId: localStorage.getItem("ID"), app_name: undefined, app_package: undefined, username: undefined, column_name: undefined },
        //删除弹窗
        deleteDialogs: { show: false, deleteText: '', deleteId: 0 },
        //APK上传大小
        apkSize: 0,
        forbid: Boolean,
        uploadLink: process.env.VUE_APP_BASE_API,
        gradeOptions: [{label: '幼儿', value: 1}, {label: '小学', value: 2}, {label: '初中', value: 3}, {label: '高中', value: 4}],
        platterOptions: [{label:'A',value:'A'},{label: 'B',value: 'B'}, {label: 'C',value: 'C'}],
        uploadApkOptions: [],
        isAdmin : true,
        paramOptions: [{label:'StartArgs', value: 'StartArgs'}, {label: 'tiku_func_type', value: 'tiku_func_type'}, {label: 'isTopic', value: 'isTopic'}, {label: 'isYYGJ', value: 'isYYGJ'}, {label: 'url', value: 'url'}],
        tempApkBg: ''
      };
    },
    created() {
      this.colData = objectable(this.checkboxVal, this.checkboxVal); //转为数组对象，好控制table
      this.getqueryAppAll();
      this.forbid = forbid(['超级管理员', '管理员'])

    },
    computed: {
      ...mapState({//获取上传滚动条
        goodsData: state => state.user.progress,
        cancelRequest: state => state.user.cancelRequest
      })
    },
    methods: {
      cancel() {
        this.cancelRequest && this.cancelRequest('取消上传')
      },
      //关闭的回调
      handleClose(done) {
        if (this.videoFlag) {
          done()
        } else {
          return this.$message.error('请等文件上传完毕')
        }
      },
      //取消的按钮
      addFormVisibleclose() {
        if (this.videoFlag) {
          this.addFormVisible = false
        } else {
          return this.$message.error('请等文件上传完毕')
        }
      },

      apkFile(event) {
        var filePath = event.name //文件名
        var index = filePath.lastIndexOf(".");
        var ext = filePath.substr(index + 1);
        var supportFileTypes = ['ipa', 'apk', 'xapk'];
        var splits = (event.name || event).split('.');
        var fileType = splits[splits.length - 1].toLowerCase();
        if (!supportFileTypes.includes(fileType)) return this.$message.error('请上传正确的文件格式')
        const parser = new readMachine(event.raw)
        //apk上传--添加和编辑，区分用户的上传数量，添加限制，编辑放开---两个接口...
        let type = this.apkUnplate ? true : false
        //文件类型
        if (ext == 'xapk') {//xapk
          this.getXapkInfo(parser, event, type);
        } else {
          parser.parse().then(res => {//解析apk
            //编辑时同一包名允许变更apk，不同包名不允许变更apk
            if (this.apkUnplate) {
              if (this.tempApkBg !== res.package) return this.$message.error('只允许修改相同包名的应用，需修改其他应用请重新添加')
            }
            this.addForm.app_package = res.package + res.versionName;
            this.addForm.app_version_name = res.versionName;
            this.addForm.app_version_code = res.versionCode;
            this.addForm.app_name = (res.application.label).constructor == Array ? res.application.label[0] : res.application.label;
            this.addForm.bg = res.package
            this.app.versionName = res.versionName
            this.getOssImg(res.icon)//上传img
            this.getOssApk(event.raw, filePath, type, event.size, event)//上传apk
            this.apkMd5(event.raw)//获取文件MD5
          }).catch(err => {
            this.$message.error('无法识别文件格式, 请重新上传')
          })
        }
      },
      //获取xapk信息
      getXapkInfo(parser, event, type) {
        const xapk = parser
        let file = xapk.file;
        let blob = new Blob([file]);
        jszip.loadAsync(blob, { optimizedBinaryString: true }).then(res => {
          for (let key in res.files) {
            //判断是否是目录
            if (!res.files[key].dir) {
              if (/icon\./.test(res.files[key].name)) {
                res.file(res.files[key].name).async('base64').then(iconinfo => {
                  this.getOssImg('data:image/png;base64,' + iconinfo)
                })
              }
              //找到我们压缩包所需要的json文件
              if (/\.(json)$/.test(res.files[key].name)) {
                res.file(res.files[key].name).async('string').then(item => {
                  //得到我们需要的JSON文件内容
                  let infocontent = JSON.parse(item);
                  //编辑时同一包名允许变更apk，不同包名不允许变更apk
                  if (this.apkUnplate) {
                    if (this.tempApkBg !== infocontent.package_name) return this.$message.error('只允许修改相同包名的应用，需修改其他应用请重新添加')
                  }
                  this.getOssApk(event.raw, filePath, type, event.size, event)
                  this.apkMd5(event.raw)//获取文件MD5
                  this.addForm.app_package = infocontent.package_name + infocontent.version_name;
                  this.addForm.app_version_name = infocontent.version_name;
                  this.addForm.app_version_code = infocontent.version_code;;
                  this.addForm.app_name = infocontent.name;
                  this.addForm.bg = infocontent.package_name
                  this.app.versionName = infocontent.version_name
                })
              }
            }
          }
        }).catch(err => { });
      },
      getOssImg(img) {
        ossImage(img).then(res => {//图片上传
          this.addForm.app_img = res
        }).catch(err => {
          this.addForm.app_img = err
        })
      },
      getOssApk(apk, filePath, type, size, event) {
        this.videoFlag = false;
        this.apkSize = event.size//文件大小
        this.app.size = event.size
        ossupload(apk, filePath, type, size).then(res => {
          this.videoFlag = true;
          this.app.filePath = res
          console.log('oss成功', res)
        }).catch(err => {
          console.log('oss失败', err)
          this.videoFlag = true;
          err.code == 10086 ? this.$message(err.msg) : ''
          //上传oss失败关闭弹窗
          this.addFormVisible = false
        })
      },

      addButton() {
        this.apkUnplate = false
        this.addFormVisible = true
      },
      //删除
      getdeleteApp(id) {
        this.deleteDialogs.show = true
        this.deleteDialogs.deleteId = id
      },
      //删除按钮事件
      deleteEvents() {
        if (!this.deleteDialogs.deleteId) {
          this.deleteDialogs.deleteId = this.idSelect[0].app_id
        }
        let params = {
          userId: localStorage.getItem("ID"),
          last_ip: sessionStorage.getItem("Ip"),
          app_id: this.deleteDialogs.deleteId,
          is_charge: -1,
        }
        deleteLauncherApp(params).then(res => {
          this.$message.success(res.msg)
          this.getqueryAppAll()
        }).catch(err => {
          console.log("请求失败", err)
        })
      },
      openEdit(row){
        console.log("这是编辑")
        this.addFormVisible=true
        this.apkUnplate=true
        this.addForm = {
          app_id: row.app_id,
          add_type: row.add_type,
          chooseApk: row.chooseApk,
          app_name: row.app_name, app_package: row.app_package, app_version_name: row.app_version_name, app_version_code: row.app_version_code, column_name: row.column_name,
          app_img: row.app_img, //左侧多选select
          file: row.file,//应用图片
          app_desc: row.app_desc,//应用简介
          bg: row.bg,
          app_url: row.app_url,
          app_size: row.app_size,
          platter_id: row.platter_id, //套餐id,
          supplier_id: row.supplier_id, //供应商id
          suitable_grade: row.suitable_grade, //适配年龄
          scheme: row.scheme,   //跳转scheme
          action: row.action,   //跳转action
          app_md5: row.app_md5,
          jump_type: row.jump_type,  //1.显式 2.隐式
          activity: row.activity,
          paramsList: row.paramsList
        }
        this.tempApkBg = row.bg
      },
      //编辑应用按钮事件
      geteditApp() {
        if (!this.videoFlag) return this.$message.error('请等文件上传完毕')
        let editForm = JSON.parse(JSON.stringify(this.addForm))
        editForm.last_ip = sessionStorage.getItem("Ip")
        editForm.userId = localStorage.getItem("ID")
        editForm.is_charge = -1
        editForm.app_size = this.apkSize || editForm.app_size
        editForm.app_url = this.app.filePath || editForm.app_url
        if(this.app.md5!=undefined) {
          editForm.app_md5 = this.app.md5
        }
        editLauncherAppControl(editForm).then(res => {
          this.$message.success(res.msg)
          this.addFormVisible = false
          this.getqueryAppAll()
        }).catch(err => { })
      },
      //上传应用按钮事件
      addApk() {
        this.$refs['ruleForm'].validate((valid) => {
          if (valid) {
            if (!this.videoFlag) return this.$message.error('请等文件上传完毕')
            let addForm = JSON.parse(JSON.stringify(this.addForm))
            addForm.last_ip = sessionStorage.getItem("Ip")
            addForm.userId = localStorage.getItem("ID")
            addForm.is_charge = -1
            addForm.app_size = this.apkSize
            addForm.app_url = this.app.filePath
            if(this.app.md5!=undefined) {
              addForm.app_md5 = this.app.md5
            }
            addLauncherAppControl(addForm).then(res => {
              this.$message.success(res.msg)
              this.addFormVisible = false
              this.getqueryAppAll();
            }).catch(err => {
              console.log("请求失败333", err);
            })

          } else {
            this.$message.error("必选项为空")
            return false;
          }
        });
      },
      //应用图标上传时的钩子
      iconAvatarSuccess(res, file) {
        let fd = new FormData();
        fd.append('file', res.raw);
        fd.append('last_ip', sessionStorage.getItem("Ip"))
        fd.append('userId', localStorage.getItem("ID"))
        uploadPreviewImg(fd).then(res => {
          this.addForm.app_img = res.data.imgPath
        }).catch(err => {
          console.log("请求失败22", err);
        })
      },

      //获取应用信息
      getqueryAppAll(startSize = 1, pageSize = 10, type = 1, parameter) {
        this.listQuery.is_charge=-1
        queryLauncherAppAll(this.listQuery).then(res => {
          this.uploadingTable = res.data;
          this.total = res.total;
          this.uploadApkOptions = res.otherData.uploadApkOptions
        }).catch(err => {
          this.uploadingTable = []
          this.total = 0
          this.uploadApkOptions = []
        });
      },
      //获取md5
      apkMd5(file) {
        const bmf = new BMF()
        bmf.md5(file, (err, md5) => {//获取文件MD5
          this.app.md5 = md5
        });
      },
      setAddForm(app_id) {
        this.uploadApkOptions.filter(item =>{
          if(item.app_id == app_id) {
            this.addForm.app_name=item.app_name; this.addForm.app_package=item.app_package; this.addForm.app_version_name=item.app_version_name;
            this.addForm.app_version_code=item.app_version_code; this.addForm.column_name=item.column_name; this.addForm.app_img=item.app_img;
            this.addForm.app_desc=item.app_desc; this.addForm.bg=item.bg; this.addForm.app_size=this.apkSize=item.app_size;this.addForm.app_url=this.app.filePath=item.app_url;
            this.addForm.app_md5=item.app_md5;
          }
        })
      },
      clearAddForm() {
        this.addForm.app_name=""; this.addForm.app_package=""; this.addForm.app_version_name="";
        this.addForm.app_version_code=""; this.addForm.column_name=""; this.addForm.app_img="";
        this.addForm.app_desc=""; this.addForm.bg=""; this.addForm.app_size=this.apkSize=0;
        this.addForm.app_url=this.app.filePath=""; this.addForm.app_md5='';

      },
      //搜索,1:id,2,应用名称，3应用包名
      idnameSearch() {
        if (!this.select) return this.$message.warning("请先选择查询条件");
        this.listQuery.startSize = 1
        this.listQuery.pageSize = 12
        switch (this.select) {
          case '1':
            this.listQuery.username = this.searchTable
            this.getqueryAppAll();
            break;
          case '2':
            this.listQuery.app_name = this.searchTable
            this.getqueryAppAll();
            break;
          case '3':
            this.listQuery.app_package = this.searchTable
            this.getqueryAppAll();
            break;
          case '4':
            this.listQuery.column_name = this.searchTable
            this.getqueryAppAll();
            break;
        }
      },
      toAddParams() {
        this.addForm.paramsList.push({
          param: '',
          value: ''
        })
      },
      toDelParams(item, index) {
        let tempList = this.addForm.paramsList
        tempList.map((value, i) => {
          if ( i== index) {
            tempList.splice(index, 1);
            this.addForm.paramsList = tempList;
          }
        });
      },

      //编辑添加表单关闭事件
      addFormclose() {
        this.$nextTick(() => {
          this.addForm = this.$options.data().addForm
          this.$refs['ruleForm'].clearValidate();
          this.app.filePath = ''
          this.videoFlag = true
          this.apkSize = 0
        })
      },
      //表格排序事件
      tableSortCge(column) {
        let order = ''
        column.order == "descending" ? order = 'desc' : order = 'asc'
        // if (column.prop == 'status') {
        //   column.order == "descending" ? order = 2 : order = 1
        // }
        let sort = [{ field: column.prop, sort: order }]
        this.listQuery.sort = JSON.stringify(sort)
        this.getqueryAppAll()
      },

      //分页
      handleSizeChange(val) {
        this.listQuery.pageSize = val
        this.getqueryAppAll();
      },
      handleCurrentChange(val) {
        this.listQuery.startSize = val
        this.getqueryAppAll();
      },
      Refresh() {
        this.listQuery = { startSize: 1, pageSize: 12, userId: localStorage.getItem("ID"), app_name: undefined, app_package: undefined, username: undefined }
        this.getqueryAppAll()
      },
      //下拉动态table子组件
      alterCheckbok(key, conte) {
        this.key = key;
        this.colData.filter(i => {
          if (conte.indexOf(i.title) != -1) {
            i.istrue = false;
            this.$nextTick(() => {
              this.$refs.tableDataRef.doLayout();
            });
          } else {
            i.istrue = true;
            this.$nextTick(() => {
              this.$refs.tableDataRef.doLayout();
            });
          }
        });
      }
    }
  };
</script>

<style scoped>
  /deep/ thead .el-table-column--selection .cell {
    display: none;
  }
</style>

<style lang="scss" scoped>
  .el-textarea__inner {
    height: 150px !important;
  }
  .addform_headers {
    width: 50%;
  }
  .picture_rm {
    margin: 10px 0;
    .rm_btn {
      width: 100px !important;
      margin-top: 10px;
    }
  }
  .icons_img {
    height: 100px;
    width: 100px;
    img {
      height: 100%;
      width: 100%;
    }
  }
  .icon_select {
    width: 77.5%;
    float: left;
  }

  .download {
    display: inline-block;
    height: 30px;
    width: 30px;
    line-height: 30px;
    box-shadow: none;
    border-left: 0;
    border-radius: 2px;
    position: relative;
    a {
      position: absolute;
      top: 0;
      left: 0;
      display: inline-block;
      height: 30px;
      width: 30px;
    }
  }
  .site_inputs {
    box-shadow: none;
    border-color: #666666;
    border: 1px solid #ccc;
    border-radius: 2px;
    padding: 5px 10px;
    color: #666666;
  }
  .app {
    ul {
      display: flex;
      flex-wrap: wrap;
      // padding: 10px;

      li {
        border-radius: 4px;
        padding: 15px 0;
        width: 25%;
        //margin: 20px 15.5px 0 15.5px;
        padding: 15px 10px 0 10px;
        .boxs {
          background-color: #fff;
          padding: 15px 0;
        }
        .apply {
          margin-left: 15px;
          font-weight: 600;
          color: #333333;
          overflow: hidden;
          width: 80%;
          text-overflow: ellipsis;
          white-space: nowrop;
          .apply_title {
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
            max-width: 100px;
            display: inline-block;
          }
          .apply_txt {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            font-size: 12px;
            color: #9c9c9c;
            margin-left: 10px;
            font-weight: 400;
            width: 60%;
            display: inline-block;
          }
        }

        .introduce {
          margin-top: 10px;
          font-size: 12px;
          color: #9c9c9c;
          .app_img {
            width: 70px;
            height: 70px;
            // border: 1px solid #b9b8b8;
            overflow: hidden;
            border-radius: 13px;
            img {
              height: 100%;
              width: 100%;
            }
          }
          .app_icon {
            font-size: 28px;
            margin-bottom: 25px;
          }
          .category {
            max-width: 60%;
            .text {
              line-height: 20px;
              word-wrap: break-word;
              word-break: normal;
            }
          }
        }
      }
    }
  }
  .appCenter {
    min-height: calc(100vh - 50px);
    width: 100%;
    background-color: #ebebeb;
  }
  .apkButton {
    position: relative;
    #file {
      opacity: 0;
      height: 28px;
      width: 77px;
    }
    .apkBtn {
    }
  }
</style>
<style>
  .el-list-leave-active {
    transition: none;
  }
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #20a0ff;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 120px;
    height: 120px;
    line-height: 120px;
    text-align: center;
  }
</style>
